<template>
	<view class="hot-search-wrap" v-if="hotList.length">
        <view class="title">
          热门搜索        
        </view>
        <view class="hot-list">
          <view class="item" v-for="(item, index) in hotList" :key="index" @click="$search_handleClick(item, Object.assign({keyword: item.content}, options))">
            {{item.content}}    
            <view class="badge" v-if="index === 0">
              HOT              
            </view>        
          </view>          
        </view>        
      </view>
</template>
<script>
import sdk from 'sdk'
import searchMixin from '@/mixins/search'
import { HOT_SEARCH, DEFAULT_CITY } from '@/model/enum'
export default {
	mixins: [searchMixin],
	props: {
		options: {
			type: Object,
			default: ()=> { return {...DEFAULT_CITY} }
		},
	},
	data() {
		return {
			HOT_SEARCH,
			hotList:[],
			cityParams: { ...DEFAULT_CITY }
		}
	},
	created() {
		sdk.getSelectCity().then( res => {
          this.cityParams = {...this.options , ...res}
			switch( parseInt(this.cityParams.regionId) ){
				case 6: this.hotList = this.HOT_SEARCH['shanghai']; break;
				case 55: this.hotList = this.HOT_SEARCH['guangzhou']; break;
				default: this.hotList = []; break;
			}
        } )
	}
}
</script>
<style lang="less">
.hot-search-wrap{
	position: relative;
	z-index: 99;
	.title{
	color: @font_color;
	font-size: 28rpx;
	margin: 20rpx 0;
	}
	.hot-list{
	display: flex;
	.item{
		width: 136rpx;
		height: 64rpx;
		margin-right: 20rpx;
		background: #F1F4F9;
		border-radius: 32rpx;          
		font-size: 24rpx;
		color:@font_color;
		.flex-normal-center;
		position: relative;
		.badge{
			width: 84rpx;
			height: 48rpx;
			.flex-normal-center;
			background: @price_color;            
			border-radius: 24rpx;
			font-size: 28rpx;
			color:#fff;
			position: absolute;
			top:-12rpx;
			right:-22rpx;
			transform: scale(0.5)
		}
	}
	}
}
</style>


